<template>
  <div>
    <div class="title">用户管理</div>
    <div class="table_card cards">
      <div class="cards1">
        <el-button type="primary" @click="centerDialogVisible = true"
          >+ 添加</el-button
        >
        <el-dialog
          title="添加用户信息"
          :visible.sync="centerDialogVisible"
          width="60%"
          center
        >
          <el-form :model="form" :inline="true">
            <el-form-item label="姓名" :label-width="formLabelWidth">
              <el-input
                v-model="form.name"
                width="100px"
                autocomplete="off"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-select v-model="form.region" placeholder="">
                <el-option label="男" value="nan"></el-option>
                <el-option label="女" value="nv"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
              <el-input v-model="form.phone" autocomplete="off"></el-input>
            </el-form-item>
            <br />
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-cascader
                v-model="value"
                :options="options"
                :props="{ expandTrigger: 'hover' }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item :label-width="formLabelWidth">
              <el-input
                v-model="form.address"
                autocomplete="off"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="centerDialogVisible = false">取 消</el-button>
            <el-button
              type="primary"
              @click="
                centerDialogVisible = false;
                addUser();
              "
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <div>
        <el-input
          placeholder="请输入关键字"
          prefix-icon="el-icon-search"
          v-model="search"
        >
        </el-input>
      </div>
      <div class="cards2">
        <el-button @click="cexiao()">撤销</el-button>
      </div>
    </div>
    <div class="table_card">
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="120"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="120"> </el-table-column>
        <el-table-column prop="phone" label="联系电话" width="160">
        </el-table-column>
        <el-table-column
          prop="address"
          label="详细地址"
          width="200"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column label="操作" align="right">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row); centerDialogVisible = true"
              >编辑</el-button
            >

            <el-dialog
              title="修改用户信息"
              :visible.sync="centerDialogVisible"
              width="60%"
              center
            >
              <el-form :model="form" :inline="true">
                <el-form-item label="姓名" :label-width="formLabelWidth">
                  <el-input
                    v-model="form.name"
                    width="100px"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth">
                  <el-select v-model="form.region" placeholder="">
                    <el-option label="男" value="nan"></el-option>
                    <el-option label="女" value="nv"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系电话" :label-width="formLabelWidth">
                  <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <br />
                <el-form-item label="详细地址" :label-width="formLabelWidth">
                  <el-cascader
                    v-model="value"
                    :options="options"
                    :props="{ expandTrigger: 'hover' }"
                    @change="handleChange"
                  ></el-cascader>
                </el-form-item>
                <el-form-item :label-width="formLabelWidth">
                  <el-input
                    v-model="form.address"
                    autocomplete="off"
                    placeholder="请输入详细地址"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false"
                  >取 消</el-button
                >
                <el-button
                  type="primary"
                  @click="
                    centerDialogVisible = false;
                    addUser();
                  "
                  >确 定</el-button
                >
              </span>
            </el-dialog>

            <el-button
              size="mini"
              type="danger"
              @click.native.prevent="handleDelete(scope.$index, tableData)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button @click="handleDeleteAll(tableData)">批量删除</el-button>
        <el-button @click="toggleSelection()">取消选择</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      options: [
        {
          value: "guangdongsheng",
          label: "广东省",
          children: [
            {
              value: "guangzhoushi",
              label: "广州市",
              children: [
                {
                  value: "panyuqu",
                  label: "番禺区",
                },
                {
                  value: "yuexiuqu",
                  label: "越秀区",
                },
                {
                  value: "huaduqu",
                  label: "花都区",
                },
                {
                  value: "haizhuqu",
                  label: "海珠区",
                },
                {
                  value: "liwanqu",
                  label: "荔湾区",
                },
                {
                  value: "huangpuqu",
                  label: "黄浦区",
                },
                {
                  value: "conghuaqu",
                  label: "从化区",
                },
                {
                  value: "zengchengqu",
                  label: "增城区",
                },
                {
                  value: "nanshaqu",
                  label: "南沙区",
                },
              ],
            },
            {
              value: "shenzhenshi",
              label: "深圳市",
              children: [
                {
                  value: "longgangqu",
                  label: "龙岗区",
                },
                {
                  value: "baoanqu",
                  label: "宝安区",
                },
              ],
            },
          ],
        },
      ],
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        phone: "",
        address: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      formLabelWidth: "120px",
      centerDialogVisible: false,
      search: "",
      tableData: [
        {
          name: "小王",
          age: 18,
          sex: "女",
          phone: "13710000001",
          address: "上海市普陀区金沙江路 1518 ",
        },
        {
          name: "小蒲",
          age: 28,
          sex: "男",
          phone: "13710000002",
          address: "上海市普陀区金沙江路 1518 ",
        },
        {
          name: "小郭",
          age: 28,
          sex: "男",
          phone: "13710000003",
          address: "上海市普陀区金沙江路 1518 ",
        },
        {
          name: "小周",
          age: 28,
          sex: "男",
          phone: "13710000004",
          address: "上海市普陀区金沙江路 1518 ",
        },
        {
          name: "小齐",
          age: 28,
          sex: "男",
          phone: "13710000005",
          address: "上海市普陀区金沙江路 1518 ",
        },
      ],
      multipleSelection: [],
    };
  },

  methods: {
    handleDeleteAll(row){
      row.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
          
        });
        row.splice(row, 5);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      row.splice(index, 1);
    },
    cexiao() {
      this.$router.go(0);
    },
    addUser() {},
    handleChange(){}
  },
};
</script>

<style>
.title {
  margin: 20px;
  padding: 0px;
  height: 80px;
  background-color: #e9ebec;
  text-align: center;
  line-height: 80px;
  font-size: 25px;
  color: #000;
}
.table_card {
  margin: 0px 60px;
  padding: 0px;
  /* border: 1px gray solid; */
}
.cards {
  display: flex;
}
.cards1 {
  margin-right: 15px;
}
.cards2 {
  margin-left: 890px;
}
</style>